<?xml version="1.0" encoding="UTF-8"?>

<!--
    Document   : NiceXmlToHtml.xsl
    Created on : June 22, 2013, 3:31 PM
    Author     : andrejkiripolsky
    Description:
        From crashes_nice.xml we make html file where every crash will be represented.
-->

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0" xmlns="http://www.w3.org/1999/xhtml">
    <xsl:output method="xml"
    doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    encoding="UTF-8"
    indent="yes"
    />

    <xsl:template match="/">
        <html>
            <head>
                <title>Textový výpis nehod</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <link href="libs/bootstrap.css" rel="stylesheet" media="screen" />
                <link href="css/style.css" rel="stylesheet" media="screen" />
                <style media="print">
                    .accident_img {
                        float:left;
                        width: 150px;
                        height: 150px;
                        margin: 0px 10px 10px 0px;
                    }
                    .accident {
                        margin: 5px 10px 20px 0px;
                        padding: 10px;
                    }
                    * {
                        font-size: 12px;
                        font-family: Verdana;
                    }
                    hr {clear:both}
                </style>


            </head>
            <body style='overflow:auto; margin: 50px; width: 840px;height:85%'>
                <h2>Seznam nehod <small><a href="javascript:window.print()">Tisk</a></small></h2>
                
                <xsl:for-each select="/events/event">
                    <xsl:sort select="@stadatetime" order="descending"/>
                    <div class="accident">
                        <xsl:variable name="ex" select="@ex" />
                        <xsl:variable name="ey" select="@ey" />
                        <a target="_blank" href="https://maps.google.cz/maps?q={$ey},{$ex}&amp;hl=cs&amp;sll={$ey},{$ex}&amp;t=h&amp;brcurrent=5,0,0&amp;z=16">
                            <img class="accident_img" src="http://maps.googleapis.com/maps/api/staticmap?center={$ey},{$ex}&amp;zoom=13&amp;size=200x200&amp;maptype=roadmap&amp;markers=color:red%7Ccolor:red%7Clabel:!%7C{$ey},{$ex}&amp;sensor=false&amp;key=AIzaSyBd1Gd5Q6Z6m_m_yvCCS38fXRdY-4j71tI" />
                        </a>
                        
                        <p><strong>Čas</strong><br/>od: <xsl:value-of select="@stadatetime"/><br />do: <xsl:value-of select="@stodatetime"/></p>
                        
                        <p><strong>Místo</strong><br/><xsl:value-of select="@position"/></p>
                       
                        <p><strong>Popis</strong><br/><xsl:value-of select="@desclong"/></p>  
                    </div>
                    <hr/>
                </xsl:for-each>
            </body>
        </html>
    </xsl:template>

</xsl:stylesheet>